<template>
  <el-config-provider :locale="locale">
    <RouterView>
    </RouterView>
  </el-config-provider>

  <el-dialog v-model="imageModel" title="图库管理" width="990" center>
    <el-card shadow="never">
      <template #header>
        <div style="display: flex;">

          <el-upload name="image" :action="`${proxy.$httpUrl}/api/admin_image_upload`" :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <el-button type="primary">图片上传</el-button>
          </el-upload>

          <div style="width: 2%;"></div>
          <el-input style="width: 30%;" type="text" />
          <div style="width: 2%;"></div>

          <el-button type="warning">搜索</el-button>
        </div>
      </template>

      <div style="width: 880px; display: flex;flex-direction:row; flex-wrap: wrap;">

        <div v-for="(item) in imageData.list" @click="selectImage(item)">
          <div
            style="display: flex; flex-direction: column; justify-content: center; align-items: center; width: 160px;  height: 220px;  margin-bottom: 10px; margin-left: 10px;"
            :class="activeId == item.id ? 'borders' : 'border'">
            <el-image style="width: 100%; height: 180px;" :src="proxy.$httpUrl+item.imgurl" fit="contain" />
            <div
              style="width: 100%; height: 40px; border-top: solid 2px #e4e4e4;  display: flex; justify-content: center; align-items: center;">
              <el-button :icon="View" circle @click.stop="viewImage(item.imageurl)" />
              <el-popconfirm title="确定删除图片?" @confirm="deleteImage(item)">
                <template #reference>
                  <el-button :icon="Delete" circle @click.stop="" />
                </template>
              </el-popconfirm>
            </div>

          </div>
        </div>
      </div>

      <div style="padding: 10px;"></div>

      <div style="display: flex; justify-content: space-between;">
        <el-pagination small background v-model:currentPage="page.pagenum" v-model:page-size="page.pagesize"
          :page-sizes="[20, 50]" :small="small" :background="background" layout="total, prev, pager, next, jumper"
          :total="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        <div>
          <el-button type="primary" @click="confirmImage">确定选择</el-button>
          <el-button @click="imageModel = false">取消选择</el-button>

        </div>
      </div>

    </el-card>

  </el-dialog>


  <el-dialog v-model="dialogImageUrl" title="图片预览" width="43%" center>
    <el-image style="width: 100%;"  :src="proxy.$httpUrl+viewimgUrl"  />
  </el-dialog>
</template>

<!-- <RouterLink to="/about">About</RouterLink> -->

<script setup>
import { ref, reactive, provide, getCurrentInstance } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import { request_post } from '@/common/axios/request.js'
import locale from 'element-plus/lib/locale/lang/zh-cn'
import { success, error } from '@/common/tool/message.js'
import { View, Delete } from '@element-plus/icons-vue'

const { proxy } = getCurrentInstance();


const imageUrlArray = ref([])
const imageUrl = ref('')
const imageUrls = ref('')
const viewimgUrl = ref('')
const imageModel = ref(false)
const activeId = ref(null)
const dialogImageUrl = ref(false)
const imageData = reactive({ list: [] })
const isRouter = ref(true)
const handleAvatarSuccess = (response) => {
  if (response.code == 200) {
    adminImageList()
    return success(response.msg)
  } else {
    return error(response.msg)
  }
}

// 图片上传
const showImageModel = () => {
  imageModel.value = true
  adminImageList()
}
provide('showImageModel', showImageModel)
provide('imageUrl', imageUrl)
provide('imageUrlArray', imageUrlArray)


function selectImage(item) {
  imageUrls.value = item.imageurl
  activeId.value = item.id
}

function confirmImage() {
  imageUrl.value = imageUrls.value
  imageUrlArray.value.push(imageUrls.value)
  imageModel.value = false
}

const page = reactive({
  pagenum: 1,
  pagesize: 10,
  total: 0
})


// 获取图片列表
function adminImageList() {

   request_post('admin_image_list',page).then(res => {
    if (res.data.code == 200) {
      imageData.list = res.data.data.data
      page.total = res.data.data.total
    } else {
      error(res.data.msg)
    }
  })
}

// 预览图片
function viewImage(url) {
  viewimgUrl.value = url
  dialogImageUrl.value = true
}


// 删除图片
function deleteImage(item) {
  request_post('admin_image_delete',item).then(res => {
    if (res.data.code == 200) {
      adminImageList()
      return success(res.data.msg)
    } else {
      return error(res.data.msg)
    }
  })

}

function handleSizeChange(val) {
  page.pagenum = val
  adminImageList()
}
function handleCurrentChange(val) {
  page.pagenum = val
  adminImageList()
}


</script>

<style >
body {
  padding: 0;
  margin: 0;
  /* background-color: #e4e4e4; */
}
/* 自定义下拉框样式 */
.custom-select-dropdown .el-select-dropdown__wrap{
  max-height: 360px;
}
.el-pagination {
  padding: 0;
}

.border {
  border: solid 3px #e2e2e2;
}

.borders {
  border: solid 3px #ff5252;
}
</style>
